<script setup>
import { ref, onMounted } from 'vue'

import DynamicForm from '@/components/DynamicForm.vue'
import { SchemaForm, SchemaWizard, SchemaFormFactory, useSchemaForm } from 'formvuelate'
import * as yup from 'yup'

const formSchema = ref({
  fields: [
    {
      label: 'Email',
      name: 'email',
      as: 'InputText',
      rules: yup.string().required().email()
    },
    {
      label: 'Password',
      name: 'password',
      feedbadk: false,
      as: 'Password',
      rules: yup.string().required()
    }
  ]
})

const formData = ref({ name: '', password: '' })
// useSchemaForm(formData)

onMounted(() => {
  console.log('hello login view.')
})
</script>
<template>
  <div class="w-full h-full flex justify-center items-center bg-sky-100">
    <DynamicForm class="flex flex-col border p-4 w-80" :schema="formSchema" :formdata="formData" />
  </div>
</template>
<style scoped>
:deep(input) {
  width: 100%;
}
</style>
